<template>
  <view class="ranking_content">
    <tn-nav-bar
      fixed
      :beforeBack="goBack"
      class="tn-color-white"
      :bottomShadow="false"
      backgroundColor="#362e7a"
      >人气排行榜</tn-nav-bar
    >
    <view :style="{ paddingTop: vuex_custom_bar_height + 'px' }">
      <view class="ranking_content_nav">
        <view class="ranking_content_nav_subsection">
          <view style="padding: 0px">
            <view class="tn-flex tn-flex-row-around">
              <view
                v-for="(item, idd) in list"
                :key="idd"
                :class="tabsIndex === idd ? 'active-style' : 'mor-style'"
                class="justify-content-item tn-text-center"
                @click="tabsChange(idd)"
              >
                {{ item.name }}
              </view>
            </view>
          </view>
        </view>
      </view>

      <view class="ranking_content_top">
        <view
          class="second-box"
          @click="
            navigateToFn({
              url: '/circleMixinPages/blogger_other?id=' + rankList[1].id,
              checkLogin: false,
            })
          "
        >
          <p>{{ rankList[1] ? rankList[1].nickname : '-' }}</p>
          <p>魅力值: {{ rankList[1] ? rankList[1].rank : "-" }}</p>
          <img src="../static/other/second.png" alt="" class="second-img" />
          <img :src="rankList[1] ? rankList[1].avatar : ''" alt="" class="second-avatar" />
        </view>
        <view
          class="first-box"
          @click="
            navigateToFn({
              url: '/circleMixinPages/blogger_other?id=' + rankList[0].id,
              checkLogin: false,
            })
          "
        >
          <p>{{ rankList[0].nickname }}</p>
          <p>魅力值: {{ rankList[0].rank || "-" }}</p>
          <img src="../static/other/first.png" alt="" class="first-img" />
          <img :src="rankList[0].avatar" alt="" class="first-avatar" />
        </view>
        <view
          class="thirdly-box"
          @click="
            navigateToFn({
              url: '/circleMixinPages/blogger_other?id=' + rankList[2].id,
              checkLogin: false,
            })
          "
        >
          <p>{{ rankList[2].nickname }}</p>
          <p>魅力值: {{ rankList[2].rank || "-" }}</p>
          <img src="../static/other/thirdly.png" alt="" class="thirdly-img" />
          <img :src="rankList[2].avatar" alt="" class="thirdly-avatar" />
        </view>
      </view>
      <!-- top list -->
      <view class="ranking_content_list">
        <!-- <view class="ranking_content_list_top">
          <text>排名</text>

          <text v-if="tabsIndex == 0">获得{{ configInfo.site_moneyname }}</text>
          <text v-if="tabsIndex == 1">消费{{ configInfo.site_moneyname }}</text>
          <text v-if="tabsIndex == 2">粉丝数</text>
          <text v-if="tabsIndex == 3">评论数</text>
        </view> -->
        <view
          v-for="(item, i) in rankList"
          :key="i"
          class="ranking_content_list_item"
          v-if="i > 2"
          @click="
            navigateToFn({
              url: '/circleMixinPages/blogger_other?id=' + item.id,
              checkLogin: false,
            })
          "
        >
          <view class="item-index">{{ i + 1 }}</view>
          <view class="item-info">
            <img
              style="
                width: 80rpx;
                height: 80rpx;
                display: block;
                flex-shrink: 0;
                border-radius: 100%;
                margin-right: 20rpx;
				object-fit: cover;
              "
              :src="item.avatar"
            >
            </img>
            <view class="ranking_content_list_item_name">
              <view class="tn-flex">
				<text
                style="
                  color: #fff;
                  font-size: 28rpx;
                  margin: 0 8rpx 8rpx 0;
                  font-weight: 500;
                "
                >{{ item.nickname }}</text
              >
              <view v-if="item.vip">
                <Grade :item="item" />
              </view>
			  </view>
              <text
                style="
                  width: 260rpx;
                  font-size: 20rpx;
                  color: #d8d8d8;
                  overflow: hidden;
                  text-overflow: ellipsis;
                  white-space: nowrap;
                  display: inline-block;
                "
                >魅力值: {{ item.rank }}</text
              >
            </view>
            <tn-button
              shape="round"
              backgroundColor="#24D4D1"
              fontBold
              width="100rpx"
              height="60rpx"
              padding="0 20rpx"
              >关注</tn-button
            >
            <!-- <view>
		  </view> -->
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import { host } from "@/siteinfo.js";
import Grade from "@/components/grade/index.vue";
export default {
  components: {
    Grade,
  },
  data() {
    return {
      san: host + "/api/pai/3.png",
      bg: host + "/api/pai/bg.png",
      yi: host + "/api/pai/1.png",
      er: host + "/api/pai/2.png",
      dingy: host + "/api/pai/dingy.png",
      dingz: host + "/api/pai/dingz.png",
      ding: host + "/api/pai/ding.png",
      left: host + "/api/pai/left.png",
      zhong: host + "/api/pai/zhong.png",
      you: host + "/api/pai/you.png",

      activeItemStyle: {
        fontSize: `36rpx`,
      },
      list: [
        {
          name: "魅力榜",
        },
        {
          name: "富豪榜",
        },
        {
          name: "红人榜",
        },
        {
          name: "话痨榜",
        },
      ],
      tabsIndex: 0,
      swiperIndex: 0,
      swiperTop: 0,
      swiperHeight: 0,
      rankList: [{},{},{}],
    };
  },
  onLoad() {
    this.info();
  },
  methods: {
    async info() {
      let that = this;
      let result = await that.$request({
        loading: 0,
        method: "post",
        url: "/chat/four/meili",
        data: {
          type: this.tabsIndex,
        },
      });
      if (result.data.code == 200) {
        this.rankList = result.data.data;
      }
    },
    // 标签栏值发生改变
    tabsChange(index) {
      this.tabsIndex = index;
      this.info();
    },
    goBack() {
      // 通过判断当前页面的页面栈信息，是否有上一页进行返回，如果没有则跳转到首页
      const pages = getCurrentPages();
      if (pages && pages.length > 0) {
        const firstPage = pages[0];
        if (
          pages.length == 1 &&
          (!firstPage.route || firstPage.route != "pages/index")
        ) {
          uni.reLaunch({
            url: "/pages/index",
          });
        } else {
          uni.navigateBack({
            delta: 1,
          });
        }
      } else {
        uni.reLaunch({
          url: "/pages/index",
        });
      }
    },

    gohome() {
      uni.reLaunch({
        url: "/pages/index",
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.ranking_content {
  position: relative;
  height: 100%;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  overflow: auto;

  .ranking_content_nav {
    width: 100%;
    padding: 40rpx 0;
    background-color: #362e7a;
    z-index: 999;
    position: fixed;

    .ranking_content_nav_subsection {
      width: 100%;
      margin: 0 auto;
    }
  }
  .ranking_content_top {
    // border: solid 1px red;
    width: 100%;
    height: 426rpx;
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    margin-top: 128rpx;
    padding: 0 40rpx 40rpx 40rpx;

    // .ranking_content_top_center {
    //   z-index: 3;
    // }

    // .ranking_content_top_left {
    //   position: relative;
    //   left: 120rpx;
    //   top: 140rpx;
    // }

    // .ranking_content_top_right {
    //   position: relative;
    //   right: 140rpx;
    //   top: 170rpx;
    // }

    .first-box,
    .second-box,
    .thirdly-box {
      width: 200rpx;
      height: 180rpx;
      border-radius: 20rpx;
      display: flex;
      flex-direction: column;
      justify-content: flex-end;
      align-items: center;
      padding-bottom: 20rpx;
      position: relative;

      p {
        margin: 0;
        padding: 0;
      }
      p:nth-child(1) {
        font-size: 28rpx;
        font-weight: bolder;
        color: #ffffff;
        margin-bottom: 8rpx;
      }
      p:nth-child(2) {
        font-size: 20rpx;
        color: #ffffff;
      }
      img {
        position: absolute;
        top: -50%;
        z-index: 2;
		object-fit: cover;
      }
    }

    .first-box {
      height: 240rpx;
      background: linear-gradient(180deg, #fa5151 0%, #ffc300 100%);
      margin-bottom: 52rpx;

      .first-img {
        width: 252rpx;
        height: 190rpx;
        top: -35%;
      }

      .first-avatar {
        width: 80rpx;
        height: 80rpx;
        border-radius: 100%;
        position: absolute;
        top: -14%;
        z-index: 1;
      }
    }
    .second-box {
      background: linear-gradient(0deg, #895afe 0%, #fa87c2 100%);

      .second-img {
        width: 182rpx;
        height: 148rpx;
      }

      .second-avatar {
        width: 80rpx;
        height: 80rpx;
        border-radius: 100%;
        position: absolute;
        top: -30%;
        z-index: 1;
      }
    }
    .thirdly-box {
      background: linear-gradient(270deg, #a7f6f9 0%, #6a6dff 100%);

      .thirdly-img {
        width: 130rpx;
        height: 148rpx;
      }

      .thirdly-avatar {
        width: 80rpx;
        height: 80rpx;
        border-radius: 100%;
        position: absolute;
        top: -30%;
        z-index: 1;
      }
    }
  }

  .ranking_content_list {
    backdrop-filter: blur(32.619361877441406px);
    opacity: 0.8;
    // border: solid 1px red;
    position: relative;
    width: 100%;
    padding: 0 40rpx;
    // padding-bottom: 100rpx;
    // height: 500rpx;
    // overflow: scroll;

    .ranking_content_list_top {
      display: flex;
      justify-content: space-between;
      color: #333330;
      padding: 40rpx 60rpx;
      font-size: 30rpx;
    }

    .ranking_content_list_item {
      display: flex;
      flex-direction: row;
      align-items: center;
      height: 100rpx;
      margin-bottom: 20rpx;

      .item-index {
        width: 88rpx;
        height: 100rpx;
        color: #fff;
        font-size: 36rpx;
        line-height: 100rpx;
        margin-right: 30rpx;
        font-weight: bold;
        background-image: url("../static/other/fourthly.png");
        background-size: 100% 100%;
        text-align: center;
      }

      .item-info {
        width: calc(100% - 118rpx);
        height: 100%;
        padding: 0 20rpx;
        border-radius: 20rpx;
        display: flex;
        justify-content: space-between;
        align-items: center;
        background: rgba(0, 0, 0, 0.302);

        .ranking_content_list_item_name {
          flex: 1;
          display: flex;
          flex-direction: column;
          align-items: flex-start;
          justify-content: center;
        }
      }
    }
  }
}

.active-style {
  color: #24d4d1;
  font-weight: bolder;
  font-size: 36rpx;
}

.mor-style {
  color: #fff;
  font-weight: 500;
  font-size: 36rpx;
}

/deep/.u-subsection--button {
  background: rgba(255, 255, 255, 0.31) !important;
  border: 1px solid rgb(255, 255, 255) !important;
  box-shadow: inset 5px 3px 7px rgba(255, 255, 255, 0.31) !important;
  backdrop-filter: blur(84.26667785644531px) !important;
  border-radius: 35rpx !important;
  height: 80rpx;
  padding: 0;
}

/deep/ .u-subsection--button__bar {
  background: linear-gradient(
    rgba(255, 255, 255, 0.4196078431372549) 0%,
    rgba(255, 255, 255, 0.4196078431372549) 100%
  );
  border: 1px solid rgb(255, 255, 255);
  box-shadow: inset 5px 3px 7px rgba(255, 255, 255, 0.31);
  backdrop-filter: blur(84.26667785644531px);
  border-radius: 40px 0px 0px 40px;
  padding: 0 !important;
}

.u-subsection {
  position: relative;
  overflow: hidden;
  /* #ifndef APP-NVUE */
  width: 100%;
  box-sizing: border-box;
  /* #endif */

  &--button {
    height: 32px;
    background-color: rgb(238, 238, 239);
    padding: 3px;
    border-radius: 3px;
    align-items: stretch;

    &__bar {
      background-color: #ffffff;
      border-radius: 3px !important;
    }
  }

  &--subsection {
    height: 30px;
  }

  &__bar {
    position: absolute;
    /* #ifndef APP-NVUE */
    transition-property: transform, color;
    transition-duration: 0.3s;
    transition-timing-function: ease-in-out;
    /* #endif */

    &--first {
      border-top-left-radius: 3px;
      border-bottom-left-radius: 3px;
      border-top-right-radius: 0px;
      border-bottom-right-radius: 0px;
    }

    &--center {
      border-top-left-radius: 0px;
      border-bottom-left-radius: 0px;
      border-top-right-radius: 0px;
      border-bottom-right-radius: 0px;
    }

    &--last {
      border-top-left-radius: 0px;
      border-bottom-left-radius: 0px;
      border-top-right-radius: 3px;
      border-bottom-right-radius: 3px;
    }
  }

  &__item {
    flex: 1;
    justify-content: center;
    align-items: center;
    // vue环境下，需要设置相对定位，因为滑块为绝对定位，item需要在滑块的上面
    position: relative;

    &--no-border-right {
      border-right-width: 0 !important;
    }

    &--first {
      border-top-left-radius: 3px;
      border-bottom-left-radius: 3px;
    }

    &--last {
      border-top-right-radius: 3px;
      border-bottom-right-radius: 3px;
    }

    &__text {
      font-size: 12px;
      line-height: 12px;

      align-items: center;
      transition-property: color;
      transition-duration: 0.3s;
    }
  }
}
</style>
